/*
 * Copyright (c) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, {useState} from 'react';
import {
  View,
  Text,
  Image,
  FlatList,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import {songs, Track} from '../model';
import CurPlaySong from './CurPlaySong';
import PlaylistHeaderTable from './PlaylistHeaderTable';
import musicPlayer from '../../util';
import {useBreakpointValue} from '@hadss/react_native_breakpoints';

const SongListTable = (): JSX.Element => {
  const [currentSong, setCurrentSong] = useState<Track>(songs[0]);
  const [isPlaying, setIsPlaying] = useState<boolean>(false);
  const itemWidth = useBreakpointValue({
    base: '100%',
    sm: '100%',
    md: '50%',
  });

  const renderItem = (item: Track, index: number): JSX.Element => (
    <TouchableOpacity
      style={[
        styles.songItem,
        {
          width: typeof itemWidth === 'string' ? itemWidth : itemWidth,
          paddingLeft: index % 2 === 0 ? 32 : 16,
          paddingRight: index % 2 === 1 ? 0 : 16,
        },
      ]}
      onPress={(): void => {
        setCurrentSong(item);
        musicPlayer.playTrackByIndex(index);
        setIsPlaying(true);
      }}>
      <View style={styles.songInfo}>
        <Text style={styles.songTitle}>{item.title}</Text>
        <View style={{flexDirection: 'row', top: 2}}>
          <Image
            source={require('../../../../asset/acoustic.png')}
            style={styles.acoustic}
          />
          <Text style={styles.songArtist}>{item.artist}</Text>
        </View>
      </View>
      <View style={{flex: 1}} />
      <Image
        source={require('../../../../asset/song_item_icon.svg')}
        style={styles.songIcon}
      />
    </TouchableOpacity>
  );

  return (
    <View style={{flex: 1, marginLeft: 32, marginRight: 32}}>
      <View style={{height: 56, justifyContent: 'center'}}>
        <Image
          source={require('../../../../asset/back.png')}
          style={{width: 40, height: 40}}
        />
      </View>
      <View style={{flex: 1, flexDirection: 'row', top: 8}}>
        <PlaylistHeaderTable />
        <View style={{flex: 1}}>
          <View style={styles.listHeader}>
            <Image
              source={require('../../../../asset/play_icon.svg')}
              style={styles.listHeaderImage}
            />
            <Text style={styles.listHeaderText}>{'播放全部'}</Text>
            <View style={{flex: 1}} />
            <Image
              source={require('../../../../asset/show_all.png')}
              style={styles.openIcon}
            />
          </View>
          <FlatList
            data={songs}
            renderItem={({item, index}): JSX.Element => renderItem(item, index)}
            keyExtractor={(item): string => item.songID}
            numColumns={2}
            showsVerticalScrollIndicator={false}
          />
        </View>
      </View>
      <CurPlaySong
        song={currentSong}
        setCurrentSong={setCurrentSong}
        isPlaying={isPlaying}
        setIsPlaying={setIsPlaying}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  songItem: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    height: 64,
    alignItems: 'center',
  },
  songInfo: {
    flexDirection: 'column',
    justifyContent: 'center',
  },
  songTitle: {
    fontSize: 16,
    fontWeight: '500',
    lineHeight: 21,
    color: 'rgba(0, 0, 0, 0.9)',
  },
  songArtist: {
    fontSize: 12,
    color: 'rgba(0, 0, 0, 0.4)',
    left: 4,
    lineHeight: 16,
  },
  songIcon: {
    width: 20,
    height: 20,
  },
  acoustic: {
    width: 16,
    height: 16,
  },
  listHeader: {
    height: 48,
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 32,
  },
  listHeaderImage: {
    width: 32,
    height: 32,
  },
  listHeaderText: {
    left: 8,
    fontSize: 18,
    color: 'rgba(0, 0, 0, 0.9)',
    fontWeight: '700',
    lineHeight: 24,
  },
  openIcon: {
    width: 20,
    height: 20,
    right: 0,
  },
});

export default SongListTable;
